<template>
  <a-modal
    v-model="visible"
    title="编辑"
    :destroy-on-close="isDestroy"
    :mask-closable="false"
    @ok="onSubmit"
  >
    <a-form-model
      v-if="visible"
      ref="roleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item ref="name" label="名称" prop="name">
        <a-input
          v-model="form.name"
          @blur="
            () => {
              $refs.name.onFieldBlur();
            }
          "
        />
      </a-form-model-item>

      <a-form-model-item ref="code" label="编码" prop="code">
        <a-input
          v-model="form.code"
          @blur="
            () => {
              $refs.code.onFieldBlur();
            }
          "
        />
      </a-form-model-item>

      <a-form-model-item ref="remark" label="备注">
        <a-input v-model="form.remark"/>
      </a-form-model-item>

      <a-form-model-item label="权限">
        <div style="height: 300px;overflow-y: auto;border: solid 1px #f2f2f2">
          <a-tree
            ref="tree"
            v-model="form.menuIds"
            checkable
            :tree-data="menuData"
            default-expand-all
            @check="onTreeCheck"
            :replace-fields="replaceFields"
          />
        </div>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>
<script>
  import {saveRole, getRoleById} from '@/api/role'
  import {listMenuTree} from '@/api/menu'

  export default {
    name: 'Edit',
    data: function () {
      return {
        labelCol: {span: 4},
        wrapperCol: {span: 14},
        other: '',
        visible: false,
        isDestroy: true,
        form: {
          id: '',
          name: '',
          code: '',
          remark: '',
          menuIds: []
        },
        rules: {
          name: [
            {required: true, message: '请输入名称', trigger: 'blur'}
          ],
          code: [
            {required: true, message: '请输入编码', trigger: 'blur'}
          ]
        },
        menuData: [],
        halfCheckedKeys: [],
        replaceFields: {
          children: 'children',
          title: 'label',
          key: 'nodeId'
        }
      }
    },
    mounted() {
      listMenuTree().then(res => {
        this.menuData = res.data
      })
    },
    methods: {
      initData(obj) {
        this.form = obj
        this.visible = true
        this.$nextTick(() => {
          if (this.form.id) {
            getRoleById(this.form.id).then(res => {
              this.setCheckedKeys(res.data.menuIds)
            })
          }
        })
      },
      setCheckedKeys(menuIds) {
        var menuArr = []
        menuIds.forEach(t => {
          const key = this.getNodekeys(t, this.menuData)
          if (key !== '') {
            menuArr.push(key + '')
          }
        })
        this.form.menuIds = Object.assign([], menuArr)
      },
      getNodekeys(menuid, childrens) {
        var key = ''
        for (var i = 0; i < childrens.length; i++) {
          const t = childrens[i]
          const id = t.nodeId
          const childs = t.children
          if (parseInt(id) === menuid) {
            if (childs && childs.length > 0) {
              key = this.getNodekeys(menuid, childs)
            } else {
              return menuid
            }
          } else if (childs && childs.length > 0) {
            key = this.getNodekeys(menuid, childs)
          }
          if (key !== '') {
            return key
          }
        }
        return key
      },
      onTreeCheck(checkedKeys, e) {
        this.halfCheckedKeys = e.halfCheckedKeys
      },
      onSubmit() {
        this.loading = true
        this.$refs.roleForm.validate(valid => {
          if (valid) {
            this.form.menuIds = this.form.menuIds.concat(this.halfCheckedKeys)
            if (!this.form.id) this.form.createUser = this.$store.getters.id
            this.form.modifyUser = this.$store.getters.id
            saveRole(this.form).then(res => {
              if (res.code === '0') {
                this.$message.success('保存成功')
              } else {
                this.$message.error('res.message')
              }
              this.visible = false
              this.$emit('ok')
            })
          }
        })
      }
    }
  }
</script>
